<template>
	<view>
		<view class="text-center" style="font-size: 20px">
			{{access_name}}
		</view>

		<view class="tips">
			<navigator :url="'/pages/access/access_checkin?access_id='+access_id">
			人员登记二维码
			</navigator>
		</view>
		<view class="qrimg">
			<view class="qrimg-i">
				<tki-qrcode cid="qrcode2" ref="qrcode2" :val="val2" :size="size" :unit="unit" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR2" />
			</view>
		</view>

		<view class="margin-lr">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-circlefill text-olive"></text> 最近出入人员：
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow">
						<navigator :url="'/pages/access/access_record?access_id='+access_id">更多</navigator>
					</button>
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item flex"
					v-for="(recordListVal, recordListIdx) in recordList"
					:key="recordListIdx">
					<view class="content">
						<view class="flex">
							<text class="cuIcon-title text-olive"></text>
							<navigator :url="'./access_record_detail?record_id='+recordListVal._id"><text class="text-sm">{{syntaxJson(recordListVal.model)}}</text></navigator>
						</view>
						<view class="flex justify-between">
							<view>登记时间：{{new Date(recordListVal.create_time).Format("MM-dd HH:mm")}}</view>
							<button class="cu-btn margin-right" @click="deleteRecord(recordListVal._id,recordListIdx)">删除</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tips">
			<navigator class="margin-lr" :url="'/pages/access/access_admin?access_id='+access_id">
			管理人员二维码
			</navigator>
		</view>
		<view class="qrimg">
			<view class="qrimg-i">
				<tki-qrcode cid="qrcode1" ref="qrcode1" :val="val1" :size="size" :unit="unit" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR1" />
			</view>
		</view>

		<view class="padding">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-btn text-green"></text>
						<text class="text-grey">管理人员验证码：</text>{{check_code}}
					</view>
					<view class="action">
						<button class="cu-btn round bg-green" @click="updateCheckCode">更新</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import '@/common/js/date.js';

	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				cururl: "",
				access_id: "",
				access_name: "",
				check_code: "",

				val1: '', // 要生成的二维码值
				val2: '',

				size: 400, // 二维码大小
				unit: 'upx', // 单位
				// background: '#b4e9e2', // 背景色
				// foreground: '#309286', // 前景色
				// pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码

				src1: '', // 二维码生成后的图片地址或base64
				src2: '', // 二维码生成后的图片地址或base64

				recordList: []
			}
		},
		onLoad() {
			this.cururl = location.origin;
			this.access_id = this.$route.query.access_id;

			if (this.access_id) {
				this.getAccessDetail();
			}

			this.val1 = `${this.cururl}/#/pages/access/access_admin?access_id=${this.access_id}`;
			this.val2 = `${this.cururl}/#/pages/access/access_checkin?access_id=${this.access_id}`;
		},
		methods: {
			// creatQrcode() {
			// 	this.$refs.qrcode._makeCode()
			// },
			qrR1(res) {
				this.src1 = res
			},
			qrR2(res) {
				this.src2 = res
			},
			getAccessDetail() {
				// 获得出入点详情
				uniCloud.callFunction({
					name: "ha_get_access",
					data: {
						type: 1,
						access_id: this.access_id
					},
					success: ({result}) => {
						// console.log(result)
						if ( result.status === 0 ) {
							// console.log(result.data)
							const {
								name,
								check_code,
								content
							} = result.data.self;
							this.access_name = name;
							this.check_code = check_code;
							// this.schema = content;
							this.recordList = result.data.record;
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			updateCheckCode() {
				uniCloud.callFunction({
					name: "ha_update_access",
					data: {
						type: 1,
						access_id: this.access_id
					},
					success: ({result}) => {
						// console.log(result);
						if ( result.status === 0 ) {
							uni.showToast({
								title: `${result.msg || "更新成功！"}`,
								duration: 1000
							});
							this.check_code = result.check_code;
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			deleteRecord(record_id,index) {
				uni.showModal({ content: '确认删除吗？', success: (res) => { if (res.confirm) {
					let token = uni.getStorageSync("token");
					let access_id = this.access_id;

					if (token) {
						uniCloud.callFunction({
							name: "ha_del_access_record",
							data: {
								token,
								access_id,
								record_id
							},
							success: ({result}) => {
								// console.log(result);
								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "删除成功！"}`,
										duration: 1000
									});
									this.recordList.splice(index, 1);
								} else {
									uni.showModal({
										content: `${result.msg || "网络异常，请稍后重试！"}`,
										showCancel: false,
										complete: function () {
											uni.navigateTo({url: "/pages/user/user_login"});
										}
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});
					} else {
						uni.navigateTo({url: "/pages/user/user_login"});
					}
				}}});
			},
			syntaxJson(json) {
				if (typeof json !== "string") {
					json = JSON.stringify(json);
				}
				return json.replace(/\{|}/g,'').replace(/\[|]/g,'').replace(/true/,'是').replace(/false/,'否').substr(0,30);
			}
		}
	}
</script>

<style>
	.tips {
		line-height: 80px;
		font-size: 14px;
		color: #999999;
		text-align: center;
	}
	.qrimg {
		display: flex;
		justify-content: center;
	}
	.qrimg-i{
		margin-right: 10px;
	}

</style>
